@use 'sass:math';

@mixin style-class($prop, $map, $responsive: false) {
    @each $key, $val in $map {
        .#{$key} {
            #{$prop}: #{$val} !important;
        }
    }

    @if ($responsive) {
        @each $key, $val in $breakpoints {
            @media screen and (min-width: #{$val}) {
                .#{$key + $separator} {
                    @each $key, $val in $map {
                        &#{$key} {
                            #{$prop}: #{$val} !important;
                        }
                    }
                }
            }
        }
    }
}

@mixin color-class($name, $prop, $colors, $shades) {
    @each $color in $colors {
        .#{$name}#{$color} {
            @each $shade in $shades {
                &-#{$shade} {
                    #{$prop}: var(--#{$color}-#{$shade}) !important;
                }
            }
        }

        .focus#{$separator} {
            &#{$name}#{$color} {
                @each $shade in $shades {
                    &-#{$shade}:focus {
                        #{$prop}: var(--#{$color}-#{$shade}) !important;
                    }
                }
            }
        }

        .hover#{$separator} {
            &#{$name}#{$color} {
                @each $shade in $shades {
                    &-#{$shade}:hover {
                        #{$prop}: var(--#{$color}-#{$shade}) !important;
                    }
                }
            }
        }

        .active#{$separator} {
            &#{$name}#{$color} {
                @each $shade in $shades {
                    &-#{$shade}:active {
                        #{$prop}: var(--#{$color}-#{$shade}) !important;
                    }
                }
            }
        }
    }
}

@mixin surface-class($name, $prop, $shades) {
    @each $shade in $shades {
        .#{$name}-#{$shade} {
            #{$prop}: var(--surface-#{$shade}) !important;
        }
    }

    @each $shade in $shades {
        .focus#{$separator} {
            &#{$name}-#{$shade}:focus {
                #{$prop}: var(--surface-#{$shade}) !important;
            }
        }

        .hover#{$separator} {
            &#{$name}-#{$shade}:hover {
                #{$prop}: var(--surface-#{$shade}) !important;
            }
        }

        .active#{$separator} {
            &#{$name}-#{$shade}:active {
                #{$prop}: var(--surface-#{$shade}) !important;
            }
        }
    }
}

@mixin border-class($name, $directions, $scales) {
    @each $dir, $prop in $directions {
        @for $i from 0 through length($scales) - 1 {
            $borderValue: if($i == 0, 'none', $i);
            $className: #{$name}-#{$dir}-#{$borderValue};
            @if ($dir == '') {
                $className: #{$name}-#{$borderValue};
            }
            
            .#{$className} {
                @each $propName in $prop {
                    #{$propName}-width: nth($scales, $i + 1) !important;
                    #{$propName}-style: if($i == 0, none, solid);
                }
            }
        }
    }

    @each $key, $val in $breakpoints {
        @media screen and (min-width: #{$val}) {
            .#{$key + $separator} {
                @each $dir, $prop in $directions {
                    @for $i from 0 through length($scales) - 1 {
                        $borderValue: if($i == 0, 'none', $i);
                        $className: #{$name}-#{$dir}-#{$borderValue};
                        @if ($dir == '') {
                            $className: #{$name}-#{$borderValue};
                        }
                        
                        &#{$className} {
                            @each $propName in $prop {
                                #{$propName}-width: nth($scales, $i + 1) !important;
                                #{$propName}-style: if($i == 0, none, solid);
                            }
                        }
                    }
                }
            }
        }
    }
}

@mixin border-radius-class($directions) {
    @each $dir, $prop in $directions {
        .#{$dir} {
            @each $propName in $prop {
                #{$propName}: var(--border-radius);
            }
        }
    }
    
    @each $key, $val in $breakpoints {
        @media screen and (min-width: #{$val}) {
            .#{$key + $separator} {
                @each $dir, $prop in $directions {
                    &#{$dir} {
                        @each $propName in $prop {
                            #{$propName}: var(--border-radius);
                        }
                    }
                }
            }
        }
    }
}

@mixin rgba-color-class($name, $prop, $colors, $shades) {
    @each $colorName, $colorValue in $colors {
        .#{$name}#{$colorName}-alpha {
            @each $shade in $shades {
                &-#{$shade} {
                    #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
                    
                }
            }
        }

        .hover#{$separator} {
            &#{$name}#{$colorName}-alpha {
                @each $shade in $shades {
                    &-#{$shade}:hover {
                        #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
                    }
                }
            }
        }

        .focus#{$separator} {
            &#{$name}#{$colorName}-alpha {
                @each $shade in $shades {
                    &-#{$shade}:focus {
                        #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
                    }
                }
            }
        }

        .active#{$separator} {
            &#{$name}#{$colorName}-alpha {
                @each $shade in $shades {
                    &-#{$shade}:active {
                        #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
                    }
                }
            }
        }
    }
}